.d-doc-preview {
  $prefix: &;

  &__playground {
    height: 500px;
  }

  &__wrapper {
    margin-top: var(--d-gap-sm);
    border: var(--d-border);

    &:empty {
      display: none;
    }

    iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }

    .shiki {
      margin-top: 0;
    }

    &--h5 {
      height: 450px;
      margin: var(--d-gap-sm) 0;

      #{$prefix} {
        &__out-content {
          display: flex;
          flex-direction: column;
          height: 100%;
        }

        &__content {
          display: flex;
          flex: 1;
          padding: 0;
          overflow: hidden;
        }

        &__code {
          flex: 1;
          display: block;
          height: 100%;
          margin-top: 0;
          padding: 0;
          overflow: auto;
        }

        &__runtime {
          width: 375px;
          height: 100%;
          padding: 0;
          overflow: hidden;
        }
      }
    }
  }

  &__runtime {
    padding: var(--d-gap-sm);
  }

  &__toolbar {
    margin-top: var(--d-gap-sm);
    padding: var(--d-gap-xs) var(--d-gap-sm);
    border-top: 1px dashed var(--d-border-color);
    text-align: center;

    > * {
      cursor: pointer;
    }

    &--active {
      border-bottom: 1px dashed var(--d-border-color);
    }
  }

  &__code {
    display: none;

    &--active {
      display: block;
    }
  }
}
